<template>
  <div class="hotboom">


    <view
        v-if="runnder_type=='express_delivery' || runnder_type=='fetch_express'"
        class="goods mb-2 flex justify-start items-baseline"
    >
      <view
          @click="goToPageUrlLogin('/ymq_canyino2o/pages/errand/add_order/index?runnder_type=express_delivery')"
          class="  rounded p-2 py-1 text-sm font-bold"
          :class="runnder_type=='express_delivery'?'font-bold text-base bg-gray-600 text-white shadow':'bg-yellow-400 text-gray-700'"
      >帮我寄快递</view>
      <view class="mx-5"></view>

      <view
          @click="goToPageUrlLogin('/ymq_canyino2o/pages/errand/add_order/index?runnder_type=fetch_express')"
          class="  rounded p-2 py-1 text-sm font-bold"
          :class="runnder_type=='fetch_express'?'font-bold text-base bg-gray-600 text-white shadow':'bg-yellow-400 text-gray-700'"
      >帮我取快递</view>
    </view>

    <header class=" px-4 ">

      <view v-if="is_need_demand">
        <div class="title">描述你的需求</div>
        <view class="mb-2  relative">
          <uni-easyinput type="textarea" v-model="params.demand" :placeholder="demand_placeholder"
                         :inputBorder="false"></uni-easyinput>
          <!--<view class="absolute bottom-0 flex justify-start items-center gap-4 ">-->
          <!--  <view @click.stop="demand_append('联系我')"-->
          <!--        class="rounded-2xl px-2 py-1 bg-gray-50 text-gray-700 text-xs text-center">联系我-->
          <!--  </view>-->
          <!--  <view @click.stop="demand_append('需要小票')"-->
          <!--        class="rounded-2xl px-2 py-1 bg-gray-50 text-gray-700 text-xs text-center">需要小票-->
          <!--  </view>-->
          <!--</view>-->
        </view>
      </view>


      <div class="tips">
        <div class="left" >最近骑手{{runner_top_near_distance || '1.5km'}}</div>
        <view class=" flex justify-start items-center gap-4 ">
          <view @click.stop="demand_append('联系我')"
                class="rounded-2xl px-2 py-1 bg-gray-50 text-gray-700 text-xs text-center">联系我
          </view>
          <view @click.stop="demand_append('需要小票')"
                class="rounded-2xl px-2 py-1 bg-gray-50 text-gray-700 text-xs text-center">需要小票
          </view>
        </view>
      </div>

      <!--<div class="tips">-->
      <!--  <div class="left" @click="toRiderList">最近骑手{{runner_top_near_distance || '1.5km'}}</div>-->
      <!--  <image @click="toRiderList" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/ymq_canyino2o/runner.png" mode="scaleToFill"/>-->
      <!--</div>-->



      <div v-if="is_need_purchase_fee" class="desc">
        <div class="left">
          <image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/desc.jpg" mode="scaleToFill"/>
          <text>骑手垫付商品费，收货时现场结清</text>
        </div>
        <div @click="isShowPurchaseFeeFrom=!isShowPurchaseFeeFrom" class="right">
          <span v-if="params.purchase_fee!=0" class="text-yellow-600">预估￥{{ params.purchase_fee }} ></span>
          <span v-if="params.purchase_fee==0">预估商品费 ></span>
        </div>
      </div>

    </header>


    <div class="goods">


      <div v-if="is_need_pickup_address" class="goods-item">
        <div class="left flex-1 flex justify-between items-center">
          <view class="rounded-full w-5 h-5 bg-black text-white flex justify-center items-center">
            <text class="text-xs">取</text>
          </view>
          <view class=" flex-1 px-2 whitespace-normal" @click="gotoSelectAddress('pickup')">
            <!--模糊的取件地址 is_full_pickup_address=false -->
            <!--完整的取件地址 is_full_pickup_address=true -->
            <view v-if="params.pickup_address!=''">
              <view v-if="params.pickup_name!=''">
                {{ params.pickup_name }} {{ params.pickup_tel }}
              </view>
              <view>
                {{ params.pickup_province }} {{ params.pickup_city }} {{ params.pickup_district }}
              </view>
              <view>
                {{ params.pickup_address }}
              </view>
            </view>
            <view v-if="params.pickup_address==''">
              <u--input :disabled="true" disabledColor="#ffffff" :clearable="true" v-model="params.pickup_address" border="none"
                        placeholder="请选择取货地址"></u--input>
            </view>
          </view>
        </div>
        <image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/location.jpg" mode="scaleToFill"/>
      </div>

      <div v-if="is_need_arrival_address" class="goods-item">
        <div class="left flex-1 flex justify-between items-center">
          <view class="rounded-full w-5 h-5 bg-yellow-400 text-black flex justify-center items-center">
            <text class="text-xs">送</text>
          </view>
          <view class=" flex-1 px-2 whitespace-normal" @click="gotoSelectAddress('arrival')">
            <view v-if="params.arrival_address!=''">
              <view>
                {{ params.arrival_name }} {{ params.arrival_tel }}
              </view>
              <view>
                {{ params.arrival_province }} {{ params.arrival_city }} {{ params.arrival_district }}
              </view>
              <view>
                {{ params.arrival_address }}
              </view>
            </view>
            <view v-if="params.arrival_address==''">
              <u--input :disabled="true" disabledColor="#ffffff" :clearable="true" v-model="params.arrival_address" border="none"
                        placeholder="请选择收货地址"></u--input>
            </view>
          </view>
        </div>

        <image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/peopel.jpg" mode="scaleToFill"/>
      </div>


      <div v-if="is_need_pickup_time" class="goods-time" @click="onTimeClick('pickup_time')">
        <span>取件时间</span>
        <div class="time">{{ params.pickup_time }} ></div>
      </div>
      <div v-if="is_need_arrival_time" class="goods-time" @click="onTimeClick('arrival_time')">
        <span>送达时间</span>
        <div class="time">{{ params.arrival_time }} ></div>
      </div>

    </div>


    <div v-if="is_need_goods_weight" class="info">
      <span>物品信息</span>
      <u--input :clearable="true" v-model="params.goods_weight" border="none" inputAlign="right"
                placeholder="请输入物品预估重量"></u--input>
      <text style="padding-left: 10rpx;">公斤</text>
      <!-- <div class="weight">{{ params.goods_weight }} ></div> -->
    </div>


    <div v-if="is_need_remarks" class="mark">
      <span>备注</span>
      <uni-easyinput v-model="params.remarks" placeholder="请输入提示信息" :inputBorder="false"></uni-easyinput>
    </div>

    <div class="other">
      <div class="other-item">
        <span>红包</span>
        <div @click="isShowRedpacket=!isShowRedpacket" class="red">
          <span v-if="params.redpacket_id!=0" class="text-yellow-600">已选择一个红包,优惠{{params.redpacket_fee}}元</span>
          <view v-if="params.redpacket_id==0">
            <span v-if="redpacket_list.length>0">有{{ redpacket_list.length }}个可用红包</span>
            <span v-if="redpacket_list.length==0">暂无可用红包</span>
          </view>
        </div>
      </div>

      <div class="other-item">
        <span>小费</span>
        <u--input :clearable="true" v-model="params.tip_fee" border="none" inputAlign="right"
                  placeholder="加小费抢单更快哦"></u--input>
        <text style="padding-left: 10rpx;">元</text>
        <!-- <div class="red">加小费抢单更快哦 ></div> -->
      </div>
    </div>


    <!--<div class="bg-red-200 text-2xl " @click="pay_success">pay_success</div>-->

    <div @click.stop="is_agree_protocol=!is_agree_protocol" class="msg">
      <radio name="is_agree_protocol" :checked="is_agree_protocol?true:false"/>
      <p>
        已阅读并同意
        <span>《跑腿服务协议》</span>
      </p>
    </div>

    <div class="h-8"></div>

    <!-- z-[10074]-->
    <footer
        class="h-14 border-0 border-t border-gray-100 border-solid w-full flex justify-between items-center fixed bottom-0 bg-white">

      <div @click="isShowOrderFeeDetail=!isShowOrderFeeDetail"
           class="px-3  h-full flex items-center justify-between">
        <div class="text-md font-semibold">
          跑腿费
          <span class="text-red-500">
            ￥<span class="text-2xl">{{ totalMoney }}</span>
          </span>
        </div>
        <span class="ml-8">明细^</span>
      </div>

      <button
          class="flex-1 h-full border-none rounded-none    font-semibold text-gray-600 mr-0 flex justify-center items-center  "
          :class="
            is_agree_protocol ? 'bg-yellow-300 text-gray-700': 'bg-yellow-100 text-gray-500'
          "
          @click="onSubmitOrder">
        提交订单
      </button>
    </footer>


    <!--CustomUserAddress-->
    <u-popup :show="isShowCustomUserAddressFrom" @close="isShowCustomUserAddressFrom=false" round="10px">
      <view class="p-5">
        <view class="font-semibold text-sm flex justify-between items-center pb-4 u-border-bottom">
          <view>输入地址信息,姓名电话可空</view>
          <view @click="isShowCustomUserAddressFrom=false" class="text-gray-300">X</view>
        </view>
        <u--form :labelStyle="{
          color: '#888',
          fontSize: '14px'
        }" labelPosition="left" :model="params" ref="uForm" labelWidth="120">
          <u-form-item label="地址" borderBottom>
            <!--<u-icon  slot="right" name="arrow-right"></u-icon>-->
            <view>
              <view class="flex justify-between items-center w-full bg-white mb-2">
                <view  class="border border-solid border-gray-100 px-2 py-1" @click="onSelectCustomAddress">
                  在地图中选择
                </view>
                <view class="border border-solid border-gray-100 px-2 py-1" @click="onSelectMyAddress">
                  在我的地址库中选择
                </view>
              </view>
              <view>
                <u--input disabled disabledColor="#ffffff" v-model="custom_user_address" border="none"></u--input>
              </view>
            </view>

          </u-form-item>
          <u-form-item label="姓名" borderBottom>
            <u--input :clearable="true" v-model="custom_user_name" border="none" placeholder="不指定名字时,可不填写"></u--input>
          </u-form-item>
          <u-form-item label="电话" borderBottom>
            <u--input :clearable="true" v-model="custom_user_tel" border="none" placeholder="不指定准确地点时,可不填写"></u--input>
          </u-form-item>
          <u-form-item>
            <view class="daya-btn" @click="onCloseCustomUserAddressFrom">确定</view>
          </u-form-item>
        </u--form>
      </view>
    </u-popup>

    <!--代购金额-->
    <u-popup :show="isShowPurchaseFeeFrom" @close="isShowPurchaseFeeFrom=false" round="10px">
      <view class="p-5">
        <view class="font-semibold text-sm flex justify-between items-center pb-4 u-border-bottom">
          <view>骑手代购金额费用</view>
          <view @click="isShowPurchaseFeeFrom=false" class="text-gray-300">X</view>
        </view>
        <u--form :labelStyle="{
          color: '#888',
          fontSize: '14px'
        }" labelPosition="left" :model="params" ref="uForm" labelWidth="120">

          <u-form-item label="预估￥" borderBottom>
            <u--input :clearable="true" v-model="params.purchase_fee" type="number"
                      placeholder="输入骑手代购时的参考价格" border="none"></u--input>
          </u-form-item>

          <u-form-item>
            <view class="daya-btn" @click="isShowPurchaseFeeFrom=false">确定</view>
          </u-form-item>

        </u--form>
      </view>
    </u-popup>

    <!--订单费用明细-->
    <!-- zIndex="10073"-->
    <u-popup :show="isShowOrderFeeDetail" @close="isShowOrderFeeDetail=false" round="10px">
      <view class="p-5">
        <view class="font-semibold text-sm flex justify-between items-center pb-4 u-border-bottom">
          <view>骑手代购金额费用</view>
          <view @click="isShowOrderFeeDetail=false" class="text-gray-300">X</view>
        </view>
        <u--form :labelStyle="{
          color: '#888',
          fontSize: '14px'
        }" labelPosition="left" :model="params" ref="uForm" labelWidth="300">

          <u-form-item label="配送距离费" borderBottom>
            <view class="text-right w-full">￥{{ params.distance_fee || 0 }}</view>
          </u-form-item>
          <u-form-item label="给骑手小费" borderBottom>
            <view class="text-right w-full">￥{{ params.tip_fee || 0 }}</view>
          </u-form-item>
          <u-form-item label="代购预付费(经平台)" borderBottom>
            <view class="text-right w-full">￥{{ params.purchase_real_fee || 0 }}</view>
          </u-form-item>
          <u-form-item label="骑手垫付(不经平台)" borderBottom>
            <view class="text-right w-full">￥{{ params.purchase_fee || 0 }}</view>
          </u-form-item>
          <u-form-item label="红包优惠金额" borderBottom>
            <view class="text-right w-full">-￥{{ params.redpacket_fee || 0 }}</view>
          </u-form-item>
          <u-form-item label="" borderBottom>
            <view class="text-sm text-gray-400 w-full text-center">
              查看计价规则
            </view>
          </u-form-item>

        </u--form>
      </view>
      <view class="h-15"></view>
    </u-popup>


    <u-popup :show="isShowRedpacket" @close="isShowRedpacket=false" round="10px">
      <view class="p-5">
        <view class="font-semibold text-sm flex justify-between items-center pb-4 u-border-bottom">
          <view>
            跑腿可用的红包
          </view>
          <view @click="isShowRedpacket=false" class="text-gray-300">X</view>
        </view>

        <view>
          <!--@change="hbradioChangeFun"-->
          <radio-group
              class="radio-group"
              name="hbradiogroup"
          >
            <scroll-view scrollY style="max-height: 600rpx;">
              <view
                  @tap.stop.prevent="selectRedpacket"
                  :data-full="0"
                  :data-kdje="0"
                  :data-rdid="0"
              >
                <view class="flex justify-between items-center my-2 py-2 border-0 border-b border-gray-200 border-solid">
                  <view class="flex justify-between items-center gap-4" id="0">
                    <view class="rounded bg-white text-center font-bold text-xl flex-1 flex justify-center items-center">
                      不使用任何红包
                    </view>
                  </view>
                  <view class="radio">
                    <radio
                        :checked="params.redpacket_id == 0"
                        value="0"
                    ></radio>
                  </view>
                </view>
              </view>


              <!--@tap.stop.prevent="xzhb"-->
              <view
                  @tap.stop.prevent="selectRedpacket"
                  :data-full="item.full"
                  :data-kdje="item.reduce"
                  :data-rdid="item.id"
                  data-type="红包"
                  v-for="(item, index) in redpacket_list"
                  :key="index"
              >
                <view class="flex justify-between items-center my-2 py-2 border-0 border-b border-gray-200 border-solid">

                  <view class="flex justify-between items-center gap-4" :id="item.coupon_id">
                    <view class="w-32 rounded text-white text-center p-5" style="background: #f65c5c">
                      <text class="text-4xl">{{ item.reduce }}</text>
                      <text class="unit">元</text>
                    </view>
                    <view class="item-right">
                      <view class="name">{{ item.name }}</view>
                      <view class="conditions" v-if="item.full != '0.0'"
                      >满{{ item.full }}可用
                      </view>
                      <view class="conditions" v-else>无门槛</view>
                      <view class="prefer">有效期至{{ item.end_time }}</view>
                    </view>
                  </view>

                  <view class="radio ml-5">
                    <!--:color="color"-->
                    <radio
                        :checked="params.redpacket_id == item.id"
                        :disabled="totalMoney < item.full"
                        :value="item.id"
                    ></radio>
                  </view>

                </view>
              </view>

              <view class="kong" v-if="redpacket_list.length == 0">
                <image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/wushuju.png"></image>
                <view>暂无可用红包</view>
              </view>

            </scroll-view>
          </radio-group>
            <view class="daya-btn" @click="isShowRedpacket=false">
              <span v-if="params.redpacket_id==0">不使用红包</span>
              <span v-if="params.redpacket_id!=0">已选择一个红包</span>
            </view>
        </view>

        <!--<view>-->
        <!--  <u-radio-group-->
        <!--      class="py-2"-->
        <!--      v-model="params.redpacket_id"-->
        <!--      placement="column"-->
        <!--  >-->
        <!--    <u-radio-->
        <!--        :size="32"-->
        <!--        :labelSize="32"-->
        <!--        :customStyle="{-->
        <!--          marginBottom: '8px',-->
        <!--          marginTop: '8px'-->
        <!--    }"-->
        <!--        label="不使用红包"-->
        <!--        :name="0"-->
        <!--    >-->
        <!--    </u-radio>-->
        <!--    -->
        <!--    <u-radio-->
        <!--        :size="32"-->
        <!--        :labelSize="32"-->
        <!--        :customStyle="{-->
        <!--          marginBottom: '8px',-->
        <!--          marginTop: '8px'-->
        <!--    }"-->
        <!--        v-for="(item, index) in redpacket_list"-->
        <!--        :key="index"-->
        <!--        :label="item.name"-->
        <!--        :name="item.id"-->
        <!--    >-->
        <!--    </u-radio>-->
        <!--  </u-radio-group>-->

        <!--  <view class="daya-btn" @click="isShowRedpacket=false">-->
        <!--    <span v-if="params.redpacket_id==0">不使用红包</span>-->
        <!--    <span v-if="params.redpacket_id!=0">已选择一个红包</span>-->
        <!--  </view>-->
        <!--</view>-->
      </view>
    </u-popup>


    <!--日期时间选择器-->
    <w-time-picker ref="picker" :title="timeTitle" @confirm="onConfirmTime" @cancel="onCancelTime" :afterDays="20"
                   :step="30" :afterHours="1"/>

    <daya-pay
        v-if="show_pay_box"
        :type="95"
        :order_id="runner_order_id"
        :mp_openid="wx_openid"
        :show_pay_box="show_pay_box"
        :kqyue="kqyue"
        jf_proportion=""
        :totalPrice="totalMoney"
        :user_wallet="userInfo.wallet"
        :hdfk="false"
        @close_pay_box="show_pay_box=false"
        @pay_success="pay_success"
        @pay_error="pay_error"
    ></daya-pay>

  </div>
</template>

<script>
import wTimePicker from '@/ymq_canyino2o//pages/errand/w-time-picker/w-time-picker.vue';
import QQMapWX from '@/qq-map/qqmap-wx-jssdk.min.js';
import util from "@/ymq_canyino2o/utils/util";

var app = getApp();
export default {
  components: {
    wTimePicker
  },
  data() {
    return {

      runner_order_id: 0,//跑腿订单id
      show_pay_box: false,
      kqyue:false,
      wx_openid: '',
      userInfo: {
        wallet: '0'
      },

      //====================================
      runnder_type: 'all',//模板类别
      //====================================
      is_need_pickup_address: true,//需要取件地址
      is_full_pickup_address: true,//是否完整的取件地址
      // is_full_pickup_address: false,//是否完整的取件地址
      pickup_address_icon_text: '取',
      pickup_address_placeholder: '请选择取货地址',
      is_need_pickup_time: true,//是否需要取件时间

      is_need_arrival_address: true,//需要送件地址
      is_full_arrival_address: true,//是否完整的送件地址
      arrival_address_icon_text: '送',
      arrival_address_placeholder: '请选择送货地址',
      is_need_arrival_time: true,//是否需要送件时间

      is_need_purchase_fee: true,//是否可填写商品预估费
      is_need_goods_weight: true,//是否可填写商品重量
      is_need_demand: true,//是否可填写需求
      is_need_remarks: true,//是否可填写备注
      demand_placeholder: "点击输入你需要骑手为你做什么事?",//需要的提示文本

      //---------------
      runner_top_near_distance: ':查询中...',
      //---------------


      isShowOrderFeeDetail: false, //费用明细
      isShowPurchaseFeeFrom: false, //预估代购金额

      isShowRedpacket: false, //红包选择
      redpacket_list: [
        {id: 5, name: '红包样例1'},
        {id: 6, name: '红包样例2'},
        {id: 7, name: '红包样例3'},
      ], //可用红包列表 优惠券列表

      is_agree_protocol: 0, //是否同意协议

      isShowCustomUserAddressFrom: false,
      fromAddress: '',
      toAddress: '',
      custom_user_type: 'pickup',

      custom_user_address: '',
      custom_user_name: '',
      custom_user_tel: '',

      timeTitle: '请选择时间',
      timeType: 'arrival_time',  // pickup_time arrival_time
      addressType: 'pickup',  // pickup arrival


      params: {
        runnder_type:'all',
        redpacket_id: 0,//红包ID
        redpacket_fee: 0,//红包金额

        pickup_province: '', //取件省
        pickup_city: '', //取件市
        pickup_district: '', //取件区
        pickup_address: '', //取件地址
        pickup_name: '', //取件人姓名
        pickup_tel: '', //取件人电话
        pickup_longitude: '', //取件经度
        pickup_latitude: '', //取件纬度

        arrival_province: '', //送达省
        arrival_city: '', //送达市
        arrival_district: '', //送达区
        arrival_address: '', //送达地址
        arrival_name: '', //送达人姓名
        arrival_tel: '', //送达人电话
        arrival_longitude: '', //送达经度
        arrival_latitude: '', //送达纬度

        pickup_time: '请选择取件时间', //取件时间
        arrival_time: '请选择送达时间', //送达时间

        goods_weight: '', //物品重量
        tip_fee: '', //小费

        distance_fee: '', //配送距离费用 //服务器端会再次计算
        purchase_fee: '', //预估代购金额
        purchase_real_fee: '', //实付代购金额

        demand: '', //需求
        remarks: '' //备注
      }
    };
  },
  computed: {
    totalMoney() {
      return this.params.tip_fee * 1 + this.params.distance_fee * 1 - this.params.redpacket_fee;
    }
  },
  watch: {
    params: {
      handler(val) {
        if (val.pickup_address && val.arrival_address) {
          this.getFee();
        }
      },
      deep: true
    }
  },
  mounted() {
    this.load_runner_top_near_distance()
    this.load_pay_box_data()
    this.load_redpacket_list()
  },
  // 页面周期函数--监听页面加载
  onLoad(options) {
    // /ymq_canyino2o/pages/errand/add_order/index?runnder_type=intra_city_express 同城快递
    // /ymq_canyino2o/pages/errand/add_order/index?runnder_type=rider_purchase 骑手代购
    app.globalData.setNavigationBarColor(this);
    this.appPageOnLoad(app);
    this.runnder_type  = options.runnder_type
    this.params.runnder_type  = options.runnder_type
    switch (this.runnder_type) {
      case 'intra_city_express': //同城快递
        this.is_need_pickup_address = true//需要取件地址
        this.is_full_pickup_address = true//是否完整的取件地址
        this.pickup_address_icon_text = '取'
        this.pickup_address_placeholder = '请选择取货地址'
        this.is_need_pickup_time = true//是否需要取件时间

        this.is_need_arrival_address = true//需要送件地址
        this.is_full_arrival_address = true//是否完整的送件地址
        this.arrival_address_icon_text = '送'
        this.arrival_address_placeholder = '请选择送货地址'
        this.is_need_arrival_time = true//是否需要送件时间

        this.is_need_purchase_fee = false//是否可填写代购预估费
        this.is_need_goods_weight = true//是否可填写商品重量
        this.is_need_demand = true//是否可填写需求信息
        this.is_need_remarks = true//是否可填写备注
        this.demand_placeholder = "点击输入你需要骑手为你做什么事?"//需要的提示文本
        break;
      case 'rider_purchase': //骑手代购  无取件时间,无准确买货地址
        this.is_need_pickup_address = true//需要取件地址
        this.is_full_pickup_address = false//是否完整的取件地址
        this.pickup_address_icon_text = '取'
        this.pickup_address_placeholder = '请选择大致的购买/取货地址'
        this.is_need_pickup_time = false//是否需要取件时间


        this.is_need_arrival_address = true//需要送件地址
        this.is_full_arrival_address = true//是否完整的送件地址
        this.arrival_address_icon_text = '送'
        this.arrival_address_placeholder = '请选择送货地址'
        this.is_need_arrival_time = false//是否需要送件时间

        this.is_need_purchase_fee = true//是否可填写代购预估费
        this.is_need_goods_weight = true//是否可填写商品重量
        this.is_need_demand = true//是否可填写需求信息
        this.is_need_remarks = true//是否可填写备注
        this.demand_placeholder = "点击输入你需要骑手为你做什么事?"//需要的提示文本
        break;
      case 'fetch_express': //骑手 取快递  无取件时间,无准确买货地址
        this.is_need_pickup_address = true//需要取件地址
        this.is_full_pickup_address = false//是否完整的取件地址
        this.pickup_address_icon_text = '取'
        this.pickup_address_placeholder = '请选择取件地址'
        this.is_need_pickup_time = false//是否需要取件时间

        this.is_need_arrival_address = true//需要送件地址
        this.is_full_arrival_address = true//是否完整的送件地址
        this.arrival_address_icon_text = '送'
        this.arrival_address_placeholder = '请选择送货地址'
        this.is_need_arrival_time = true//是否需要送件时间


        this.is_need_purchase_fee = false//是否可填写代购预估费
        this.is_need_goods_weight = true//是否可填写商品重量
        this.is_need_remarks = true//是否可填写备注
        this.is_need_demand = true//是否可填写需求信息
        this.demand_placeholder = "点击输入你的快递取件码,或大概在哪儿取件"//需要的提示文本
        break;
      case 'express_delivery': //骑手 寄快递  无取件时间,无准确买货地址
        this.is_need_pickup_address = true//需要取件地址
        this.is_full_pickup_address = true//是否完整的取件地址
        this.pickup_address_icon_text = '取'
        this.pickup_address_placeholder = '请选择寄件地址'
        this.is_need_pickup_time = true//是否需要取件时间

        this.is_need_arrival_address = true//需要送件地址
        this.is_full_arrival_address = true//是否完整的送件地址
        this.arrival_address_icon_text = '送'
        this.arrival_address_placeholder = '请选择送件地址'
        this.is_need_arrival_time = true//是否需要送件时间

        this.is_need_purchase_fee = false//是否可填写代购预估费
        this.is_need_goods_weight = true//是否可填写商品重量
        this.is_need_remarks = true//是否可填写备注
        this.is_need_demand = false//是否可填写需求信息
        this.demand_placeholder = "点击输入你需要骑手为你做什么事?"//需要的提示文本
        break;
      default:
        this.params.runnder_type = 'all';
        break;
    }
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {
  },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {
    console.log("onShow 外卖送件")
    let xzdz_id = uni.getStorageSync('xzdz_id');
    if (xzdz_id) {
      uni.removeStorageSync('xzdz_id');
      this.onSelectAddress(xzdz_id);
    }
  },
  // 页面周期函数--监听页面隐藏
  onHide() {
  },
  // 页面周期函数--监听页面卸载
  onUnload() {
  },
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
  methods: {
    selectRedpacket(t) {
      if (Number(t.currentTarget.dataset.full) > this.totalMoney) {
        uni.showModal({
          title: '提示',
          content: '您的订单金额不满足此红包条件'
        })
        return false
      }
      this.params.redpacket_fee = t.currentTarget.dataset.kdje
      this.params.redpacket_id = t.currentTarget.dataset.rdid
    },
    pay_success() {
      console.log("pay_success 触发")
      this.show95Modal("支付成功,请耐心等待骑手接单", "下单成功", "订单列表", () => {
        console.log("下单成功 前往订单列表")
        this.goToPageUrlLogin('/ymq_canyino2o/pages/errand/list')
      });
    },
    pay_error() {
      this.show95Modal("支付失败了", "支付失败", "订单列表", () => {
        console.log("支付失败 前往订单列表")
        this.goToPageUrlLogin('/ymq_canyino2o/pages/errand/list')
      });
    },
    load_redpacket_list() {
      var h = uni.getStorageSync('users').id
      app.globalData.util.request({
        url: 'entry/wxapp/get_mycoupons',
        cachetime: '0',
        data: {
          store_id: 0, //因为是跑腿,这里是没有店铺id的
          user_id: h
        },
        success: (t) => {
          this.redpacket_list = t.data.data
        }
      })
    },
    load_pay_box_data() {
      this.kqyue=getApp().globalData.xtxx.is_yuepay=='1'

      var h = uni.getStorageSync('users').id
      app.globalData.util.request({
        url: 'entry/wxapp/UserInfo',
        cachetime: '0',
        data: {
          user_id: h
        },
        success: (t)=> {
          var a = util.formatTime(new Date()).substring(0, 10).replace(/\//g, '-')
          if ('' != t.data.dq_time && t.data.dq_time >= a.toString()) {
            t.data.ishy = 1
          }
          this.userInfo=t.data
        }
      })

    },
    async load_runner_top_near_distance() {

        await uni.getLocation({
          type: 'gcj02',
          success:  (res) => {

                app.globalData.util.request({
                  url: 'entry/wxapp/runner_near_info',
                  cachetime: '0',
                  method: 'post',
                  data: {
                    longitude: res.longitude,
                    latitude: res.latitude
                  },
                  success: (t)=> {
                    this.runner_top_near_distance=t.data.data.runner_top_near_distance
                  }
                })

          },
          fail: (res) => {
            this.runner_top_near_distance=":无在线骑手"
          }
        });

    },
    onSelectAddress(dz_id) {
      console.log("dz_id",dz_id)
      app.globalData.util.request({
        url: 'entry/wxapp/get_address_info',
        cachetime: '0',
        data: {
          dz_id: dz_id
        },
        success: (res) => {
          console.log("res",res)
          if (!res.data) {
            uni.$u.toast('地址选择失败!')
            return false
          }
          // console.log("res",res);
          //将area使用,分割为数组,赋值给省市区
          var area = res.data.area
          var areaArr = area.split(',')
          if (areaArr.length != 3) {
            areaArr = ['-省-', '-市-', '-区县-'];
          }
          // console.log("areaArr",areaArr)
          // console.log("this.params",this.params)
          //pickup arrival
          if (this.addressType == 'pickup') {
            this.params.pickup_province = areaArr[0];
            this.params.pickup_city = areaArr[1]
            this.params.pickup_district = areaArr[2]
            this.params.pickup_address = res.data.address
            this.params.pickup_name = res.data.user_name
            this.params.pickup_tel = res.data.tel
            this.params.pickup_latitude = res.data.lat
            this.params.pickup_longitude = res.data.lng
          } else {
            this.params.arrival_province = areaArr[0];
            this.params.arrival_city = areaArr[1]
            this.params.arrival_district = areaArr[2]
            this.params.arrival_address = res.data.address
            this.params.arrival_name = res.data.user_name
            this.params.arrival_tel = res.data.tel
            this.params.arrival_latitude = res.data.lat
            this.params.arrival_longitude = res.data.lng
          }

        }
      })
    },
    gotoSelectAddress(addressType) {
      this.addressType = addressType;
      console.log("this.is_full_pickup_address",this.is_full_pickup_address)
      //pickup=取 arrival=送
      if (addressType == 'pickup' && this.is_full_pickup_address == false) {
        //不精确的购买地址
        this.onCustomUserAddressFrom(addressType)
      }else{
        uni.navigateTo({
          url: '/ymq_canyino2o/pages/wddz/xzdz'
        })
      }
    },

    //   this.distance(t, a, function (juli) {
    //     if (max_juli < juli) {
    //       //距离不可下单
    //       uni.showModal({
    //         title: '提示',
    //         content: '当前选择的收货地址超出商家配送距离,请选择其他地址',
    //         success: function (t) {
    //           if (t.confirm) {
    //             uni.navigateTo({
    //               url: '../wddz/xzdz'
    //             })
    //           } else {
    //             t.cancel
    //           }
    //         }
    //       })
    //     } else {
    //       //距离可下单
    //     }
    //     //触发配送费用计算
    //   })
    distance: function (t, a, e) {
      var s = 1;

      // #ifdef H5
      e(s);
      // #endif

      // #ifndef H5
      qqmapsdk.calculateDistance({
        mode: 'driving',
        from: {
          latitude: t.lat,
          longitude: t.lng
        },
        to: [
          {
            latitude: a.lat,
            longitude: a.lng
          }
        ],
        success: function (t) {
          if (0 == t.status) {
            s = Math.round(t.result.elements[0].distance)
            e(s)
          }
        },
        fail: function (t) {
          if (373 == t.status) {
            s = 15000
            e(s)
          }
        },
        complete: function (t) {
        }
      })
      // #endif
    },
    selectAddressCallback() {
      var user_id = uni.getStorageSync('users').id
      app.globalData.util.request({
        url: 'entry/wxapp/MyDefaultAddress',
        cachetime: '0',
        data: {
          user_id: user_id
        },
        success: (res) => {
          if (!res.data) {
            uni.$u.toast('地址选择失败!')
            return false
          }
          // console.log("res",res);
          //将area使用,分割为数组,赋值给省市区
          var area = res.data.area
          var areaArr = area.split(',')
          if (areaArr.length != 3) {
            areaArr = ['-省-', '-市-', '-区县-'];
          }
          // console.log("areaArr",areaArr)
          // console.log("this.params",this.params)
          //pickup arrival
          if (this.addressType == 'pickup') {
            this.params.pickup_province = areaArr[0];
            this.params.pickup_city = areaArr[1]
            this.params.pickup_district = areaArr[2]
            this.params.pickup_address = res.data.address
            this.params.pickup_name = res.data.user_name
            this.params.pickup_tel = res.data.tel
            this.params.pickup_latitude = res.data.lat
            this.params.pickup_longitude = res.data.lng
          } else {
            this.params.arrival_province = areaArr[0];
            this.params.arrival_city = areaArr[1]
            this.params.arrival_district = areaArr[2]
            this.params.arrival_address = res.data.address
            this.params.arrival_name = res.data.user_name
            this.params.arrival_tel = res.data.tel
            this.params.arrival_latitude = res.data.lat
            this.params.arrival_longitude = res.data.lng
          }

        }
      })
    },
    demand_append(text) {
      console.log("demand_append", text)
      this.params.demand = this.params.demand + " " + text;
      this.$forceUpdate();
      console.log("this.params.demand", this.params.demand)
    },
    getFee() {
      const {pickup_longitude, pickup_latitude, arrival_longitude, arrival_latitude} = this.params;
      app.globalData.util.request({
        url: 'entry/wxapp/runner_distance_fee_calculate',
        data: {
          pickup_longitude,
          pickup_latitude,
          arrival_longitude,
          arrival_latitude
        },
        success: (res) => {
          this.params.distance_fee = res.data.data.distance_fee || 0;
        }
      });
    },
    runnerOrderAdd() {
      app.globalData.util.request({
        url: 'entry/wxapp/runner_order_add',
        method: 'post',
        data: {
          ...this.params
        },
        success: (res) => {
          if (res.data.code == 1) {

            //下单成功,现在发起支付.
            //res.data.data.order_id

            this.runner_order_id=res.data.data.order_id

            this.show_pay_box=true

            // this.show95Modal("您的订单已经提交成功,请耐心等待骑手接单", "下单成功", "去订单列表", () => {
            //   this.goToPageUrlLogin('/ymq_canyino2o/pages/errand/list')
            // });

          } else {
            uni.$u.toast(res.data.msg);
          }
        }
      });
    },
    onSubmitOrder() {
      if (this.is_agree_protocol == false) {
        uni.$u.toast('请先同意跑腿服务协议')
        return false;
      }
      // console.log(this.params, 'paramsparams');
      this.runnerOrderAdd();
    },
    onTimeClick(type) {
      this.timeType = type;
      if (this.timeType === 'pickup_time') {
        this.timeTitle = "请选择期望取件时间";
      } else {
        this.timeTitle = "请选择期望送达时间";
      }
      this.$refs.picker.show();
    },
    onCancelTime() {
      console.log('onCancelTime');
    },
    onConfirmTime(res) {
      if (this.timeType === 'pickup_time') {
        this.params.pickup_time = res; //取件时间
      } else {
        this.params.arrival_time = res; //送达时间
      }
    },
    onCloseCustomUserAddressFrom() {
      this.isShowCustomUserAddressFrom = false;
      if (this.custom_user_type === 'pickup') {
        this.params.pickup_address = this.custom_user_address;
        this.params.pickup_name = this.custom_user_name;
        this.params.pickup_tel = this.custom_user_tel;
      } else {
        this.params.arrival_address = this.custom_user_address;
        this.params.arrival_name = this.custom_user_name;
        this.params.arrival_tel = this.custom_user_tel;
      }
    },
    toRiderList() {
      uni.navigateTo({
        url: '/ymq_canyino2o/pages/rider/index'
      });
    },
    toChatDetail() {
      uni.navigateTo({
        url: '/ymq_canyino2o/pages/chat/chatDetail/index'
      });
    },
    onCustomUserAddressFrom(type) {
      this.isShowCustomUserAddressFrom = true;
      this.custom_user_type = type;
      if (this.custom_user_type === 'pickup') {
        this.custom_user_address = this.params.pickup_address;
        this.custom_user_name = this.params.pickup_name;
        this.custom_user_tel = this.params.pickup_tel;
      } else {
        this.custom_user_address = this.params.arrival_address;
        this.custom_user_name = this.params.arrival_name;
        this.custom_user_tel = this.params.arrival_tel;
      }
    },
    onSelectMyAddress() {
      this.isShowCustomUserAddressFrom = false;
      uni.navigateTo({
        url: '/ymq_canyino2o/pages/wddz/xzdz'
      })
    },
    onSelectCustomAddress() {
      // #ifdef MP
      // 小程序才需要  获取用户的当前设置。
      uni.getSetting({
        success: res => {
          if (res.authSetting['scope.userLocation']) {
            /* 用户授权成功时走这里 */
            this.handerChooseLocation();
          } else if (res.authSetting['scope.userLocation'] === undefined) {
            /* 用户未授权时走这里 */
            console.log('没有授权');
            this.handleOpenSetting();
          } else {
            /* 用户拒绝了授权后走这里 */
            console.log('拒绝了授权 false');
            this.handleOpenSetting();
          }
        }
      });
      // #endif

      // #ifndef MP
      this.handerChooseLocation();
      // #endif
    },
    handerChooseLocation(latitude, longitude) {
      let that = this;
      uni.chooseLocation({
        latitude: latitude || '',
        longitude: longitude || '',
        success: res => {
          console.log('wx.chooseLocation res=', res);
          that.custom_user_address = res.address;
          //todo 这里的key后期需要远程拉取
          let qqmapsdk = new QQMapWX({
            key: '34IBZ-6CPKZ-ERBXI-Z2Y5O-F3PT6-HCBN4'
          });
          if (that.custom_user_type == 'pickup') {
            that.params.pickup_address = res.address;
            that.params.pickup_latitude = res.latitude;
            that.params.pickup_longitude = res.longitude;
            qqmapsdk.reverseGeocoder({
              location: {
                latitude: res.latitude,
                longitude: res.longitude
              },
              success: re => {
                that.params.pickup_province = re.result.address_component.province;
                that.params.pickup_city = re.result.address_component.city;
                that.params.pickup_district = re.result.address_component.district;
                console.log(re.result.address_component, '121212');
              }
            });
          } else {
            that.params.arrival_address = res.address;
            that.params.arrival_latitude = res.latitude;
            that.params.arrival_longitude = res.longitude;
            qqmapsdk.reverseGeocoder({
              location: {
                latitude: res.latitude,
                longitude: res.longitude
              },
              success: re => {
                that.params.arrival_province = re.result.address_component.province;
                that.params.arrival_city = re.result.address_component.city;
                that.params.arrival_district = re.result.address_component.district;
                console.log(re.result.address_component, '121212');
              }
            });
          }
        },
        fail: function (err) {
          console.log('取消按钮', err);
        }
      });
    },
    handleOpenSetting() {
      wx.openSetting({
        success: res => {
          console.log('定位 openSetting', res);
          if (res.authSetting['scope.userLocation']) {
            this.handerChooseLocation();
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.hotboom {
  min-height: 100vh;
}

/*header,*/
/*.goods,*/
/*.info,*/
/*.mark,*/
/*.other {*/
/*  @apply mx-2 my-2 rounded-xl bg-white px-3 py-3 ;*/
/*}*/

header,
.goods,
.info,
.mark,
.other {
  margin-left: 0.5rem; /* mx-2 in Tailwind */
  margin-right: 0.5rem; /* mx-2 in Tailwind */
  margin-top: 0.5rem; /* my-2 in Tailwind */
  margin-bottom: 0.5rem; /* my-2 in Tailwind */
  border-radius: 1.5rem; /* rounded-xl in Tailwind */
  background-color: #ffffff; /* bg-white in Tailwind */
  padding-left: 0.75rem; /* px-3 in Tailwind */
  padding-right: 0.75rem; /* px-3 in Tailwind */
  padding-top: 0.75rem; /* py-3 in Tailwind */
  padding-bottom: 0.75rem; /* py-3 in Tailwind */
}

header .title {
  font-weight: 600;
}

header .tips {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #eee;
}

header .tips .left {
  font-weight: 600;
  font-size: 22rpx;
  padding: 4rpx 10rpx;
  border: 1px solid red;
  border-radius: 20rpx;
  background: rgb(255, 227, 227);
}

header .tips image {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
}

header .desc {
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24rpx;
  color: #706e6e;
}

header .desc .left {
  display: flex;
  align-items: center;
}

header .desc image {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
  border-radius: 10rpx;
}

.goods image {
  width: 50rpx;
  height: 50rpx;
}

.goods .goods-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 10rpx;
  border-bottom: 1px solid #eee;
}

.goods .goods-item .left {
  display: flex;
  align-items: center;
}

.goods .goods-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.info,
.mark,
.other .other-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.goods-time span,
.info span,
.mark span,
.other span {
  font-weight: 600;
  font-size: 24rpx;
}

.other .other-item {
  padding: 10rpx 0;
}

.other .other-item:first-child {
  border-bottom: 1px solid #eee;
}

.msg {
  font-size: 14px;
  width: 95%;
  display: flex;
  align-items: center;
  margin: 10rpx auto;
  margin-bottom: 120rpx;
}

.msg p span {
  color: rgb(255, 196, 87);
}

/*footer {*/
/*	width: 100%;*/
/*	height: 100rpx;*/
/*	display: flex;*/
/*	justify-content: space-between;*/
/*	align-items: center;*/
/*	position: fixed;*/
/*	bottom: 0;*/
/*	padding: 0 0 0 2.5%;*/
/*	background: #fff;*/
/*}*/
/*footer .left span {*/
/*	color: red;*/
/*	font-size: 30rpx;*/
/*	font-weight: 600;*/
/*}*/
/*footer .right {*/
/*	width: 50%;*/
/*	display: flex;*/
/*	align-items: center;*/
/*	justify-content: space-between;*/
/*}*/
/*footer .right button {*/
/*	height: 100rpx;*/
/*	width: 70%;*/
/*	border: none;*/
/*	outline: none;*/
/*	border-radius: none;*/
/*	display: flex;*/
/*	align-items: center;*/
/*	justify-content: center;*/
/*	background: rgb(242, 212, 157);*/
/*	color: #817e7e;*/
/*	margin-right: 0;*/
/*}*/
</style>
